<!doctype html>
<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"
         language="java" %>
<%@ include file="/jsp/mobile/include/include.jsp" %>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<html lang="cn">
<head>
    <%@ include file="/jsp/mobile/include/header.jsp" %>
    <title>信用卡还款</title>
</head>

<body>
<!-- <div class="head">
<div class="auto">
    <span class="tit">扫码收款</span> <a href="javascript:goBackMain();" class="ico retu"></a>
</div>
</div> -->
<div class="main">
    <div class="bkms">
        <dl class="clearfix">
            <dt>
                <img
                        src="<%=request.getContextPath()%>/images/mobile/${payCard.bankCode}.png">
            </dt>
            <dd>
                <div class="bankNm">
                    <p class="tit">
                        <c:out value="${payCard.bankName}"/>
                    </p>

                    <p class="con">
                        <span>尾号<c:out value="${payCard.lastCardNo}"/> </span> <span>信用卡</span>
                    </p>
                </div>
            </dd>
        </dl>
    </div>
    <form id="repayForm"
          action="<%=request.getContextPath()%>/mobile/index/repayresult">
        <token:tokenTag></token:tokenTag>
        <div class="ciTab mt15">
            <ul>
                <li><span class="tit">账户余额</span> <span class="f14 red">￥<fmt:formatNumber
                        pattern="#,##0.00"
                        value="${null == acct.avlBal?0.00:acct.avlBal}"/> </span> <input
                        type="hidden" name="avlBal" id="avlBal"
                        value="<c:out value='${null == acct.avlBal?0.00:acct.avlBal}' />">
                </li>
            </ul>
        </div>
        <div class="ciTab mt15">
            <ul>
                <li><span class="tit">还款金额</span> <input type="number"
                                                         onfocus="" name="repayAmt" id="repayAmt" class="text"
                                                         placeholder="输入还款金额" autocomplete="off">
                </li>
                <li><span class="tit">扣款金额</span> <input type="number"
                                                         readonly name="tradeAmt" id="tradeAmt" class="text"
                                                         placeholder="根据还款金额自动计算">
                </li>
                <li><span class="tit">支付密码</span> <input name="tradePwd"
                                                         id="tradePwd" type="password" class="text" placeholder="输入支付密码"
                                                         autocomplete="off" maxlength="6">
                </li>
            </ul>
        </div>

        <div class="ctix">
            <p class="f14">温馨提示：</p>

            <p class="gray9 mt5">1.扣款金额为还款金额+还款手续费，还款秒到账。</p>

            <p class="gray9 mt5">2.还款手续费：0元/笔（单笔大于等于5000元），2元/笔（单笔小于5000元）；实时到账需额外承担0.15%的垫资手续费；</p>
        </div>
        <div class="payOk mb20">
            <div class="nbtn mt20">
                <a class="butn butn-gray" id="confirmAmt"
                   href="javascript:repay();">确认</a>
            </div>

        </div>
    </form>
</div>
<script type="text/javascript">
    var _rate = parseFloat("<c:out value='${rate}'/>");
    $("#repayAmt")
            .bind(
            "input propertychange",
            function () {
                //这里写当input的文字(text)发生改变时所执行的代码！
                var _repayAmt = $("#repayAmt").val();
                var _tradeAmt = (parseFloat(_repayAmt)*(1+_rate)).toFixed(2);
                if(parseFloat(_repayAmt) < 5000)
                {
                    _tradeAmt = (parseFloat(_tradeAmt)+2).toFixed(2);
                }
                $("#tradeAmt").val(_tradeAmt);
            });

    function repay() {
        var _tradeAmt = $("#tradeAmt").val();
        var _tradePwd = $("#tradePwd").val();
        var _avlBal = $("#avlBal").val();
        var _msg = "";

        if (parseFloat(_tradeAmt) > parseFloat(_avlBal)) {
            _msg += "还款金额超出可用余额";
        }

        if (_tradePwd == "") {
            _msg += "请输入支付密码";
        }

        if (_msg == "") {
            $("#confirmAmt").removeAttr("href");
            $("#repayForm").submit();
        } else {
            window.openMsg(_msg, 3);
        }
    }

    $("#repayAmt").bind("focus", function () {
        $(this).removeAttr("placeholder");
    });

    $("#repayAmt").bind("blur", function () {
        if ($(this).val() == '') {
            $(this).attr("placeholder", "输入还款金额");
        }
    });

    $("#tradePwd").bind("focus", function () {
        $(this).removeAttr("placeholder");
    });

    $("#tradePwd").bind("blur", function () {
        if ($(this).val() == '') {
            $(this).attr("placeholder", "输入支付密码");
        }
    });

    $("#repayAmt").bind("input propertychange", function () {
        //这里写当input的文字(text)发生改变时所执行的代码！
        changeStyleByValue();
    });

    function changeStyleByValue() {
        var _amt = $("#repayAmt").val();
        if (checkPrice(_amt) && parseFloat(_amt) > 0) {
            $("#confirmAmt").removeClass("butn-gray").attr("href",
                    "javascript:repay();");
        } else {
            $("#confirmAmt").addClass("butn-gray").removeAttr("href");
        }
    }
</script>
</body>
</html>